<template>
  <div>
    <div class="zsgl_box">
      <div class="sele">
        <div class="zsfl_sele">
          <a-select
            show-search
            placeholder="请选择知识类型"
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="zsflChange"
            allowClear
          >
            <a-select-option v-for="(item,i) in tabdata" :key="i" :value="i">{{item.name}}</a-select-option>
          </a-select>
        </div>
        <a-input
          placeholder="请输入关键字"
          @change="zsglsearch"
          v-model="xwkeyword"
          style="width: 200px"
        />
        <a-icon type="search" class="search" />
      </div>
      <!-- <a-tabs :default-active-key="zsgl_key" @change="callback"> -->
      <!-- <a-tab-pane v-for="(item,i) in tabdata" :key="i" :tab="item"> -->
          <a-spin tip="正在加载中。。。。" size="large" :spinning="spinflag">

      <a-table
        :columns="columns"
        :pagination="pagination"
        @change="getNewsList"
        :data-source="data"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a href="javascript:;" @click="NewsModify(record)" class="del">修改</a>
            <a-popconfirm title="确定删除吗?" class="del" @confirm="() => xwdelete(record.ArticleID)">
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </div>
        </template>
        <!--  -->
        <template slot="Title" slot-scope="text, record, index">
          <div>
            <!-- <a href=""></a> -->
            <a href="javascript:;" @click="NewsModify(record)">{{text}}</a>
          </div>
        </template>
        <template slot="OnTop" slot-scope="text, record, index">
          <div>
            <a-input
              placeholder
              style="width: 100px"
              @change="topchange(record)"
              v-model="record.OnTop"
            />
          </div>
        </template>
        <template slot="vouch" slot-scope="text, record, index">
          <div>
            <a-switch
              :checked="record.vouch=='1'?true:false"
              @change="swChange"
              @click="swclick(record.ArticleID,record)"
            />
          </div>
        </template>
      </a-table>
          </a-spin>

      <!-- </a-tab-pane> -->
      <!-- </a-tabs> -->
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
const columns = [
  {
    title: "标题",
    dataIndex: "Title",
    key: "Title",
    scopedSlots: { customRender: "Title" }
  },
  {
    title: "发布日期",
    dataIndex: "UpdateTime",
    key: "UpdateTime"
  },
  {
    title: "作者",
    dataIndex: "Author",
    key: "Author"
  },
  {
    title: "置顶号",
    dataIndex: "OnTop",
    key: "OnTop",
    scopedSlots: { customRender: "OnTop" }
  },
  {
    title: "审核",
    dataIndex: "vouch",
    key: "vouch",
    scopedSlots: { customRender: "vouch" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    key: "operation"
  }
];

const data = [];
export default {
  data() {
    return {
      tabdata: [
        { tp: "gcsdy", name: "工程师答疑", channelId: "1012", classId: "0" },
        { tp: "zylw", name: "专业论文", channelId: "1020", classId: "0" },
        { tp: "zcdh", name: "轴承代号", channelId: "0", classId: "1" },
        { tp: "zccl", name: "轴承材料", channelId: "0", classId: "2" },
        { tp: "zczz", name: "轴承制造", channelId: "0", classId: "4" },
        { tp: "zcyy", name: "轴承应用", channelId: "1005", classId: "0" },
        { tp: "djzt", name: "电机专题", channelId: "1024", classId: "0" },
        { tp: "mfrh", name: "密封润滑", channelId: "1006", classId: "0" },
        { tp: "zxyhd", name: "直线与滑动", channelId: "1010", classId: "0" },
        { tp: "zcazycx", name: "轴承安装与拆卸", channelId: "0", classId: "6" },
        { tp: "zcbz", name: "轴承标准", channelId: "1013", classId: "0" },
        { tp: "zbcg", name: "招标采购", channelId: "1011", classId: "0" },
        { tp: "zcjc", name: "轴承检测", channelId: "0", classId: "3" },
        { tp: "wxby", name: "维修保养", channelId: "1003", classId: "0" },
        { tp: "qtzl", name: "其他资料", channelId: "0", classId: "5" }
        
              // { tp: "qtzt", name: "其他专题", channelId: "0", classId: "9" },
        // { tp: "zwjj", name: "征文集锦", channelId: "2015", classId: "0" },
        // { tp: "zcps", name: "轴承评述", channelId: "1021", classId: "0" },
      ],
      data,
      columns,
      zsgl_key: 0,
      fbzsflag: false,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      newsType: 1,
      xwkeyword: "",
      examine: "",
      sw_id: "",
      OnTop: "",
      fbzsval: "",
      channelId: "",
      classId: "",
           spinflag: true

    };
  },

  methods: {
    zsglsearch() {
      this.pagination.current = 1;
      this.getNewsList(this.pagination);
      this.$store.state.fh_index[0].xwkeyword = this.xwkeyword;
    },
    callback(key) {
      console.log(key);
      this.newsType = Number(key) + 1;
      this.zsgl_key = Number(key);
      this.$store.state.fh_index[0].tabs_index = Number(key);
      this.$store.state.tabsfbzsname[0].newsType = this.newsType;
      this.$store.state.tabsfbzsname[0].tabdata = this.tabdata[key];
      // this.$store.state.fh_index[0].xwkeyword = this.xwkeyword;
      this.$store.state.fh_index[0].xwkeyword = "";
      this.xwkeyword = "";
      this.pagination.current = 1;

      this.getNewsList(this.pagination);
    },
    xwdelete(id) {
      // console.log("1111")
      this.axios
        .post(
          "zhishi/ZczsDelete.php",
          qs.stringify({
            id: id,
            // newsType: this.newsType
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getNewsList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    swChange(checked) {
      console.log(`a-switch to ${checked}`);
      if (checked) {
        this.examine = 1;
      } else {
        this.examine = 0;
      }
      setTimeout(() => {
        this.axios
          .post(
            "zhishi/ZczsExamine.php",
            qs.stringify({
              id: this.sw_id,
              examine: this.examine,
              // newsType: this.newsType
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.getNewsList(this.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }, 500);
    },
    topchange(val) {
      console.log(val);
      console.log(this);
      this.axios
        .post(
          "zhishi/ZczsModifyTopNum.php",
          qs.stringify({
            id: val.ArticleID,
            topNum: val.OnTop,
            // newsType: this.newsType
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            // this.getNewsList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    swclick(id) {
      this.sw_id = id;
    },
    getNewsList(pagination) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "zhishi/ZczsList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: this.pagination.defaultPageSize,
            // newsType: this.newsType,
            channelId: this.channelId,
            classId: this.classId,
            keyword: this.xwkeyword
          })
        )
        .then(res => {
          console.log(res);

          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = i;
            }
            this.data = res.data.result.data;
                        this.spinflag = false;

          } else {
            this.data = [];
            this.pagination.total = 0;
          }
        });
    },
    NewsModify(val) {
      // console.log(val)

      this.$store.state.fbzsval = val;
      this.$store.state.xiugaiflag = "edit";
      console.log(this.$parent.tab_xw);
      // this.$parent.tab_xw = 2;
      this.$router.push("/fbzs");

      this.$store.state.fh_index[0].tabs_index = this.zsgl_key;
      this.$store.state.fh_index[0].page_index = this.pagination.current;
      this.$store.state.fh_index[0].xwkeyword = this.xwkeyword;
      console.log(this.$store.state.fbzsval);

      // this.$parent.xwback(2)
    },
    zsflChange(key) {
      if (key) {
        this.channelId = this.tabdata[key].channelId;
        this.classId = this.tabdata[key].classId;
      } else {
        this.channelId = "";
        this.classId = "";
      }
      this.getNewsList(this.pagination);
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
  },
  components: {
    headerComm
  },
  created() {
    this.zsgl_key = this.$store.state.fh_index[0].tabs_index;
    this.newsType = this.$store.state.fh_index[0].tabs_index + 1;
    this.pagination.current = this.$store.state.fh_index[0].page_index;
    this.xwkeyword = this.$store.state.fh_index[0].xwkeyword;
    this.getNewsList(this.pagination);
  }
};
</script>

<style lang='less'>
.zsgl_box {
  position: relative;
  //   top: 112px;
  background: #fff;
  text-align: left;
  padding: 10px;
  .top_bav_bar {
    padding: 20px;
    text-align: left;
    button {
      margin: 0 10px;
    }
  }
  .sele{
    z-index: 9!important;
  }
}
.zsfl_sele {
  margin-right: 10px;
}
// .fbzs_tk {
//   position: fixed;
//   top: 0;
//   left: 0;
//   background: rgba(0, 0, 0, 0.5);
//   width: 100%;
//   height: 1000px;
//   z-index: 999;
//   .fbzs_btn {
//     position: absolute;
//     top: 22%;
//     left: 37%;
//     width: 30%;
//     height: 248px;
//     background: #fff;
//     text-align: left;
//     padding: 35px;
//     button {
//       margin: 10px;
//     }
//   }
// }
</style>
